<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>{{ number }}</p>
		<div id="">
			<p>{{ scopr }}<p>{{ number }}</p></p>
		</div>
		<p>{{ scopr }}</p>
		<script type="text/javascript">
			// var data = { name: 'liukun' , scopr: 25 }
			// // 第一步改造data
			// var keys = Object.keys(data)
			// for (var key of keys) {
			// 	(function (key) {
			// 		Object.defineProperties(data, {
			// 			['_' + key]: {
			// 				value: data[key],
			// 				writable: true,
			// 				enumerable: false
			// 			},
			// 			[key]: {
			// 				get () { return this[`_${key}`] },
			// 				set (value) {
			// 					this[`_${key}`] = value
			// 					console.log(`${key}变了`)
			// 					change(key)
			// 				},
			// 				enumerable: true
			// 			}
			// 		})
			// 	})(key)
			// }
			// Object.seal(data)
			// console.log(data)
			// // 第二部 构建虚拟dom数,并完成首次绑定元素内容
			// var arr = []
			// function getChildren (parent) {
			// 	var children = parent.children
			// 	for (var child of children) {
			// 		 // console.log(child.children.length)
			// 		if (child.children.length > 0) {
			// 			getChildren(child)
			// 			// console.log(555)
			// 			// arguments.callee(child)
			// 		} else {
			// 			for (var key of keys) {
			// 				if (child.innerHTML === `{{ ${key} }}`) {
			// 					arr.push({
			// 						elem:child,
			// 						innerHTML: child.innerHTML
			// 					})
			// 					child.innerHTML = data[key]
			// 				}
			// 			}
			// 		}
			// 	}
			// }
			// getChildren(document.body)
			// // console.log(keys, arr)
			
			// // 第三部动态加载data的改变
			// function change (key) {
			// 	for (var obj of arr) {
			// 		if (obj.innerHTML === `{{ ${key} }}`) {
			// 		    console.log(obj)	
			// 			obj.elem.innerHTML = data[key]
			// 		}
			// 	}
			// }
			
			// setInterval(function () {
			// 	data.scopr++
			// },1000)
			
			
			var data = {number: 10}
			//  第一步处理data对象
			var keys = Object.keys(data)
			console.log(keys)
			for (var key of keys) {
				(function (key) {
					Object.defineProperties(data,{
						['_' + key]: {
							value: data[key],
							writable: true,
							enumerable: false
						},
						[key]:{
							get() {return this['_' + key]},
							set(value) {
								this['_' + key] = value
							},
							enumerable: true
						}
				    })
				})(key)
			}
			
			// 第二步创建dom树
			var arr = []
			function getchild (parent) {
				var children = parent.children 
				for (var child of children) {
					if (child.children.length > 0) {
						arguments.callee(child)
					} else {
						for (var key of keys) {
							console.log(key)
							if (child.innerHTML == `{{ ${key} }}`) {
								arr.push({
									elem: child,
									innerHTML: child.innerHTML
								})
								child.innerHTML=data[key]
							}
						}
					}
				}
			}
			getchild(document.body)
			
			
			
			
			
			
		</script>
	</body>
</html>
